<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Editor Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <script id="operator-template" type="text/x-template">
    <div class="operator">
      <div>
        <button @click="undo">undo</button>
        <button @click="redo">redo</button>
      </div>

      <div>
        <button @click="showArticle">强制更新</button>
        <button @click="logHtml">输出HTML</button>
        <button @click="logRawData">RawData</button>
        <button @click="newArticle">新文章</button>
      </div>

      <div>
        <p>转换段落类型：</p>
        <div>
          <button @click="modifyType('h1')">一级标题</button>
          <button @click="modifyType('h2')">二级标题</button>
          <button @click="modifyType('h3')">三级标题</button>
          <button @click="modifyType('h4')">四级标题</button>
          <button @click="modifyType('h5')">五级标题</button>
          <button @click="modifyType('h6')">六级标题</button>
          <button @click="modifyType('normal')">普通段落</button>
          <button @click="modifyType('codeBlock')">代码块</button>
        </div>
      </div>

      <div>
        <p>设置选中内容样式：</p>
        <div>
          <button @click.prevent="bold">加粗</button>
          <button @click="deleteText">删除</button>
          <button @click="italic">斜体</button>
          <button @click="underline">下划线</button>
          <button @click="code">代码段</button>
          <button @click="clearStyle">清除所有样式</button>
        </div>
        <p>自定义选中内容样式：</p>
        <div>
          <span class="key">样式名：</span>
          <input type="text" v-model="inlineStyle">
        </div>
        <div>
          <span class="key">值：</span>
          <input type="text" v-model="inlineStyleValue">
        </div>
        <button @click="customerInlineStyle">确定</button>
        <p>添加连接：</p>
        <div>
          <span class="key">地址：</span>
          <input type="text" v-model="link">
          <button @click="addLink">确定</button>
        </div>
        <button @click="unLink">移除链接</button>
      </div>
      <div>
        <p>修改段落样式：</p>
        <div>
          <button @click="modifyStyle('textAlign', 'center')">文字居中</button>
          <button @click="modifyStyle('backgroundColor', 'grey')">灰色背景</button>
          <button @click="modifyStyle('color', 'white')">白色字体</button>
          <button @click="modifyStyle('remove', 'all')">清除所有样式</button>
        </div>
        <p>自定义段落样式：</p>
        <div>
          <span class="key">样式名：</span>
          <input type="text" v-model="blockStyle">
        </div>
        <div>
          <span class="key">值：</span>
          <input type="text" v-model="blockStyleValue">
        </div>
        <button @click="customerBlockStyle">确定</button>
      </div>
      <div>
        <p>列表相关：</p>
        <div>
          <button @click="modifyType('ul')">无序列表</button>
          <button @click="modifyType('ol')">有序列表</button>
          <button @click="indent">缩进</button>
          <button @click="outdent">取消缩进</button>
        </div>
      </div>
      <div>
        <p>列表相关：</p>
        <div>
          <button @click="addTable">添加表格（默认 3*3 带表头）</button>
        </div>
        <p>修改表格大小</p>
        <div>
          <span class="key">行数：</span>
          <input type="number" v-model="tableRow">
        </div>
        <div>
          <span class="key">列数：</span>
          <input type="number" v-model="tableCol">
        </div>
        <div>
          <span class="key">表头：</span>
          <input type="checkbox" v-model="tableHead">
        </div>
        <button @click="modifyTable">修改</button>
      </div>
      <div>
        <p>
          <span>段落内添加表情图片：</span>
          <button @click="insertInlineImage">添加</button></p>
        <p>使用网络图片：</p>
        <div>
          <span class="key">地址：</span>
          <input type="text" v-model="inlineImage">
          <button @click="customerInlineImage">确定</button>
        </div>
      </div>
      <div>
        <p>
          <span>添加占用一行的图片：</span>
          <button @click="insertImage">添加</button>
        </p>
        <p>使用网络图片：</p>
        <div>
          <span class="key">地址：</span>
          <input type="text" v-model="image">
          <button @click="customerImage">确定</button>
        </div>
      </div>
    </div>
  </script>

  <body>
    <div class="flex">
      <div id="operator"></div>
      <div class="editor-wrap" id="root"></div>
    </div>
  </body>
</html>
